<template>
    <div class="pd-30">
        <div class="flex">
            <div class=" center">
                <p>合伙人姓名：</p>
                <el-input class="w-200" v-model="value" placeholder="请输入"></el-input>
            </div>
            <!-- <div class=" center">
                <p>地址：</p>
                <el-input class="w-200" v-model="form.address" placeholder="请输入"></el-input>
            </div>
            <div class=" center">
                <p>手机号：</p>
                <el-input class="w-200" v-model="form.phone" placeholder="请输入"></el-input>
            </div>
            <div class=" center">
                <p>状态：</p>
                <el-select class="w-200" v-model="value" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div> -->
        </div>
        <div class="flex mt-10">
            <div class="flex">
                <!-- <div class=" center">
                    <p class="mr-15">区域：</p>
                    <el-select class="w-280" v-model="value1" placeholder="请选择">
                        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div> -->
                <!-- <el-input v-if="value1 != 1" class="w-280 ml-194" v-model="input"
                  :placeholder="`请输入${options1[value1 - 1].label}名称`"></el-input> -->
            </div>
            <div class="flex">
                <el-button class="w-100" @click="value = '',page = 1,getUserList()">重置</el-button>
                <div class="w-30"></div>
                <el-button class="w-100" type="primary" plain @click="getUserList">搜索</el-button>
                <div class="w-30"></div>
                <el-button class="w-100" type="primary" @click="addUser">添加</el-button>
            </div>
        </div>
        <div class="h-30"></div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="编号">
            </el-table-column>
            <el-table-column prop="name" label="服务商名称">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
            <el-table-column prop="phone" label="手机号">
            </el-table-column>
            <el-table-column prop="mail" label="邮箱">
            </el-table-column>
            <!-- <el-table-column prop="mail" label="下属合伙人额度">
          </el-table-column>
          <el-table-column prop="mail" label="下属合伙人">
          </el-table-column> -->
            <el-table-column prop="status" label="状态">
                <template #default="{ row }">
                    <p v-if="row.status == 1">正常</p>
                    <p class="red" v-else>禁用</p>
                </template>
            </el-table-column>
            <el-table-column prop="submitTime" label="创建时间">
            </el-table-column>
            <el-table-column label="操作" width="250">
                <template slot-scope="scope">
                    <el-button size="mini" @click="lookUserClick(scope.$index, scope.row)">查看员工</el-button>
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <!-- <el-button size="mini" type="success">设置上级</el-button> -->
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">禁用</el-button>

                </template>
            </el-table-column>
        </el-table>
        <div class="flex mt-20">
            <div></div>
            <el-pagination :current-page="page" background layout="prev, pager, next" :total="total" @current-change="sizeChange">
            </el-pagination>
        </div>


        <el-dialog :visible.sync="yuangongShow" width="70%" :show-close="false">
            <span slot="title" class="dialog-footer">
                <h4 class="text-center">员工列表</h4>
            </span>
            <div class="flex">
                <div class=" center">
                    <div class=" center">
                        <p>姓名：</p>
                        <el-input class="w-200" v-model="name" placeholder="请输入"></el-input>
                    </div>
                    <div class=" center ml-20">
                        <p>账号：</p>
                        <el-input class="w-200" v-model="phone" placeholder="请输入"></el-input>
                    </div>
                </div>
                <div class="flex ml-80">
                    <el-button class="w-100" @click="chongzhi1">重置</el-button>
                    <el-button class="w-100" type="primary" @click="getList">搜索</el-button>
                    <el-button class="w-100" type="primary" @click="addClick">添加</el-button>
                </div>
            </div>
            <div class="h-30"></div>
            <el-table :data="jfzxData" style="width: 100%" height="450">
                <el-table-column prop="id" label="编号">
            </el-table-column>
            <el-table-column prop="account" label="账号">
            </el-table-column>
            <el-table-column prop="name" label="姓名">
            </el-table-column>
            <el-table-column prop="phone" label="手机号">
            </el-table-column>
            <el-table-column prop="mail" label="邮箱">
            </el-table-column>
            <el-table-column prop="status" label="状态">
                <template #default="{ row }">
                    <p v-if="row.status == 1">正常</p>
                    <p class="red" v-else>禁用</p>
                </template>
            </el-table-column>
                <el-table-column prop="submitTime" label="创建时间">
                </el-table-column>
                <el-table-column label="操作" width="150">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit1(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete1(scope.$index, scope.row)">禁用</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="flex mt-20">
                <div></div>
                <el-pagination :current-page="page1" background layout="prev, pager, next" :total="total1"
                    @current-change="sizeChange1">
                </el-pagination>
            </div>



        </el-dialog>

        <el-dialog :visible.sync="userShow" width="30%" :show-close="false">
            <span slot="title" class="dialog-footer">
                <h4 class="text-center">{{ type == 1 ? '新增' : '修改' }}用户</h4>
            </span>
            <div class="plr-30  scroll">
                <div class="flex_l">
                    <div class="w-80">账号：</div>
                    <el-input class="w-350 ml-20" v-model="form1.account" placeholder="请输入"></el-input>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-80">头像：</div>
                    <el-upload class="ml-20" :action="upUrl" list-type="picture-card" :on-success="handlePictureCardPreview1"
                        :on-remove="handleRemove1" :limit="1" :file-list="imgList">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-80">邮箱：</div>
                    <el-input class="w-350 ml-20" v-model="form1.mail" placeholder="请输入"></el-input>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-80">姓名：</div>
                    <el-input class="w-350 ml-20" v-model="form1.name" placeholder="请输入"></el-input>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-80">手机号：</div>
                    <el-input class="w-350 ml-20" v-model="form1.phone" placeholder="请输入"></el-input>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-80">密码：</div>
                    <el-input class="w-350 ml-20" v-model="form1.pwd" placeholder="请输入"></el-input>
                </div>
                <!-- <div class="flex_l mt-20">
                    <div class="w-80">用户类型：</div>
                    <el-select class="w-350 ml-20" v-model="form1.platform" placeholder="请选择" @change="init">
                        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div> -->
                <div class="flex_l mt-20">
                    <div class="w-80">角色：</div>
                    <el-select class="w-350 ml-20" filterable  v-model="form1.roles" placeholder="请选择">
                        <el-option v-for="item in rolesList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <!-- <div class="flex_l mt-20">
                    <div class="w-80">选择用户：</div>
                    <el-select class="w-350 ml-20" v-model="form1.thirdId" placeholder="请选择" filterable @change="changeJs1">
                        <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </div> -->
                <div class="flex_l mt-20">
                    <div class="w-80">备注：</div>
                    <el-input class="w-350 ml-20" size="small" v-model="form1.beiZhu" type="textarea"
                        placeholder="请输入"></el-input>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="userShow = false">取 消</el-button>
                <el-button type="primary" @click="addjfUser">确 定</el-button>
            </span>
        </el-dialog>





        <el-dialog :visible.sync="show" width="30%" :show-close="false">
            <span slot="title" class="dialog-footer">
                <h4 class="text-center">新增合伙人</h4>
            </span>
            <!-- style="overflow-y: scroll;" -->
            <div class="plr-30">
                <div class="flex_l">
                    <div class="w-100">姓名：</div>
                    <el-input class="w-350 ml-20" v-model="form.name" placeholder="请输入"></el-input>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-100">手机号：</div>
                    <el-input class="w-350 ml-20" v-model="form.phone" placeholder="请输入"></el-input>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-100">邮箱：</div>
                    <el-input class="w-350 ml-20" v-model="form.mail" placeholder="请输入"></el-input>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-100">地址：</div>
                    <el-input class="w-350 ml-20" v-model="form.address" placeholder="请输入"></el-input>
                </div>
                <!-- <div class="flex_l mt-20">
                  <div class="w-60">角色：</div>
                  <el-select class="w-350 ml-20" v-model="form.platform" placeholder="请选择" @change="changeJs">
                      <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                  </el-select>
              </div> -->
                <!-- <div class="flex_l mt-20">
                  <div class="w-100">身份证号：</div>
                  <el-input class="w-350 ml-20" v-model="form.mail" placeholder="请输入"></el-input>
              </div>
              <div class="flex_l mt-20">
                  <div class="w-100">身份证照片：</div>
                  <el-upload class="ml-20" :action="upUrl" list-type="picture-card" :on-success="handlePictureCardPreview"
                      :on-remove="handleRemove" :limit="1">
                      <div>正面</div>
                  </el-upload>
                  <el-upload class="ml-20" :action="upUrl" list-type="picture-card" :on-success="handlePictureCardPreview"
                      :on-remove="handleRemove" :limit="1">
                      <div>反面</div>
                  </el-upload>
              </div> -->
                <div class="flex_l mt-20">
                    <div class="w-100">备注：</div>
                    <el-input class="w-350 ml-20" size="small" v-model="form.beiZhu" type="textarea"
                        placeholder="请输入"></el-input>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="show = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getUserList, editUser, addUser, removeUser,
    jfzxUserList,jfzxUserAdd,jfzxUserEdit,jfzxUserRemove,cusRoleList 

} from '@/api/fws.js'
export default {
    name: "Shareholder",
    data() {
        return {
            yuangongShow: false,
            userShow:false,
            show: false,
            options: [{
                value: '1',
                label: '正常'
            }, {
                value: '2',
                label: '停用'
            }],
            value: '',
            options1: [
                {
                    value: '1',
                    label: '总部系统'
                }, {
                    value: '2',
                    label: '服务商系统'
                }, {
                    value: '3',
                    label: '合伙人系统'
                }, {
                    value: '4',
                    label: '交付中心系统'
                }
            ],
            value1: '1',
            input: '',
            tableData: [],
            page: 1,
            total: 0,
            page1: 1,
            total1: 0,
            form: {
                address: '',
                beiZhu: '',
                mail: '',
                name: '',
                phone: ''
            },
            dialogImageUrl: '',
            type: '',//1新增 2修改
            upUrl: '',
            selectInfo: {},
            phone: '',
            name: '',
            jfzxData: [],
            form1: {
                account: '',
                beiZhu: '',
                headerPic: '',
                mail: '',
                name: '',
                phone: '',
                platform: '3',
                pwd: '',
                roles: '',
                thirdId: '',
                thirdName: ''
            },
            imgList:[],
            rolesList:[]
        }
    },
    mounted() {
        this.getUserList()
        this.upUrl = this.$upLoadUrl
    },
    methods: {
        search(){

        },
        addClick(){
            for (var i in this.form1) {
                if (i != 'platform' && i != 'roles') {
                    this.form1[i] = ''
                }
            }
            this.type = 1
            this.userShow = true
            this.form1.thirdId = this.selectInfo.id;
            this.form1.thirdName = this.selectInfo.name;
            this.init()
        },
        init(){
            cusRoleList({
                pageNum: 1,
                pageSize: 10000,
                platform:this.form1.platform
            }).then(res => {
                this.rolesList = res.rows
            })
        },
        addjfUser(){
            var apiFunction = this.type == 1 ? jfzxUserAdd : jfzxUserEdit
            apiFunction(this.form1).then(res=>{
                if (res.code == 0) {
                    this.userShow = false
                    this.getList()
                    this.$message({
                        message: this.type == 1 ? '添加成功' : '修改成功',
                        type: 'success'
                    });
                } else {
                    this.$message.error(res.msg || '失败');
                }
            })
        },
        lookUserClick(index,item) {
            console.log(item)
            this.selectInfo = item
            this.yuangongShow = true;
            this.page1 = 1
            this.total1 = 0
            this.getJfzxUser()
        },
        getList(){
            this.page1 = 1
            this.total1 = 0
            this.getJfzxUser()
        },
        chongzhi1(){
            this.name = ''
            this.phone = ''
            this.page1 = 1
            this.total1 = 0
            this.getJfzxUser()
        },
        sizeChange(e){
            this.page = e
            this.getUserList()
        },
        sizeChange1(e){
            this.page1 = e
            this.getJfzxUser()
        },
        getJfzxUser(){
            jfzxUserList({
                account:this.phone,
                name:this.name,
                pageNum:this.page1,
                pageSize:10,
                platform:3,
                // thirdId:''
                thirdId:this.selectInfo.id
            }).then(res=>{
                this.jfzxData = res.rows
                this.total1 = res.total
            })
        },
        changeJs(e) {
            this.form.thirdId = e
            this.form.thirdName = this.options1.filter(item => item.value === e)[0].label;
        },
        addUser() {
            for (var i in this.form) {
                if (i != 'platform' && i != 'thirdId' && i != 'thirdName' && i != 'roles') {
                    this.form[i] = ''
                }
            }
            this.show = true
            this.type = 1
        },
        submit() {
            var apiFunction = this.type == 1 ? addUser : editUser
            apiFunction(this.form).then(res => {
                if (res.code == 0) {
                    this.show = false
                    this.getUserList()
                    this.$message({
                        message: this.type == 1 ? '添加成功' : '修改成功',
                        type: 'success'
                    });
                } else {
                    this.$message.error(res.msg || '失败');
                }
            })
        },
        getUserList() {
            getUserList({
                pageNum: this.page,
                pageSize: 10,
                name: this.value,
                fuWuShangId: this.$store.state.user.userInfo.userExt.id,
                fuWuShangName: this.$store.state.user.userInfo.userExt.name

            }).then(res => {
                this.tableData = res.rows
                this.total = res.total
            })
        },
        handleEdit1(e, type) {
            console.log(type)
            for (var i in this.form1) {
                this.form1[i] = type[i]
            }
            console.log(this.form1)
            this.form1.roles = Number(type.roles)
            this.form1.id = type.id
            this.userShow = true
            this.type = 2
            this.init()
        },
        handleEdit(e, type) {
            for (var i in this.form) {
                this.form[i] = type[i]
            }
            this.form.id = type.id
            this.show = true
            this.type = 2
        },
        handleDelete1(e, type) {
            this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                jfzxUserRemove({ ids: type.id }).then(res => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getJfzxUser()
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        handleDelete(e, type) {
            this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                removeUser({ ids: type.id }).then(res => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getUserList()
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
            this.form.headerPic = ''
        },
        handlePictureCardPreview(file) {
            this.form.headerPic = file.list[0].url
        },
        handleRemove1(file, fileList) {
            this.form1.headerPic = ''
        },
        handlePictureCardPreview1(file) {
            this.form1.headerPic = file.list[0].url
        }
    }
}
</script>

